<template>
  <div class="pd-20">
    <el-radio-group v-model="type"
                    class="mb-20"
                    @change="changeType">
      <el-radio-button :label="1">通用价格配置</el-radio-button>
      <el-radio-button :label="2">服务医生配置</el-radio-button>
    </el-radio-group>
    <div v-if="type === 1">
      <el-form :model="formModel"
               :rules="formModelRules"
               ref="formModelRef">
        <el-form-item label="分析医生："></el-form-item>
        <el-form-item label="分析分成：">
          <el-radio-group v-model="setType"
                          @change="changeSetType">
            <el-radio-button :label="0">医 师</el-radio-button>
            <el-radio-button :label="2">技 师</el-radio-button>
            <el-radio-button :label="7">检验师</el-radio-button>
          </el-radio-group>
          <template>
            <el-table :data="tableData"
                      style="width: 100%"
                      border
                      class="mt-20">
              <template v-if="tableData&&tableData.length">
                <el-table-column :prop="`${item.doctorTitleName}${index}`"
                                 :label="item.doctorTitleName"
                                 v-for="(item,index) in tableData[0].checkPriceMap[setType]"
                                 :key="index">
                  <template slot-scope="scoped">

                    <el-input-number :min="0"
                                     :controls="false"
                                     :precision="2"
                                     v-model="scoped.row.checkPriceMap[setType][index].price"
                                     :placeholder='`请输入${item.doctorTitleName}`'
                                     class="w-200" />
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>
        </el-form-item>
        <!-- 复核医生 -->
        <el-form-item label="复核医生："></el-form-item>
        <el-form-item label="复核分成：">
          <el-radio-group v-model="setCheckType"
                          @change="changeSetCheckType">
            <el-radio-button :label="0">医 师</el-radio-button>
            <el-radio-button :label="2">技 师</el-radio-button>
            <el-radio-button :label="7">检验师</el-radio-button>
          </el-radio-group>
          <template>
            <el-table :data="tableData"
                      style="width: 100%"
                      border
                      class="mt-20">
              <template v-if="tableData&&tableData.length">
                <el-table-column :prop="`${item.doctorTitleName}${index}`"
                                 :label="item.doctorTitleName"
                                 v-for="(item,index) in tableData[0].recheckPriceMap[setCheckType]"
                                 :key="index">
                  <template slot-scope="scoped">
                    <el-input-number :min="0"
                                     :controls="false"
                                     :precision="2"
                                     v-model="scoped.row.recheckPriceMap[setCheckType][index].price"
                                     :placeholder='`请输入${item.doctorTitleName}`'
                                     class="w-200" />
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>
        </el-form-item>
      </el-form>
      <p class="mt-20"
         align="center">
        <el-button type="primary"
                   @click="submitForm">保 存</el-button>
      </p>
    </div>
    <div v-if="type === 2">
      <!-- 分析医生 -->
      <el-card class="box-card">
        <div slot="header"
             class="clearfix">
          <span>分析医生：</span>
          <el-button type="primary"
                     size="mini"
                     @click="handleAdd(1)">新 增</el-button>
        </div>
        <el-table :data="tableList1"
                  style="width: 100%"
                  border>
          <el-table-column prop="doctorName"
                           label="医生姓名">
          </el-table-column>
          <el-table-column prop="doctorTitleName"
                           label="医生职级">
          </el-table-column>
          <el-table-column prop="departmentName"
                           label="所属科室">
          </el-table-column>
          <el-table-column prop="hospitalName"
                           label="所属医院">
          </el-table-column>
          <el-table-column prop="option"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="danger"
                         @click="delRow(scope.row)">删 除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
      <!-- 复核医生 -->
      <el-card class="box-card mt-20">
        <div slot="header"
             class="clearfix">
          <span>复核医生：</span>
          <el-button type="primary"
                     size="mini"
                     @click="handleAdd(2)">新 增</el-button>
        </div>
        <el-table :data="tableList2"
                  style="width: 100%"
                  border>
          <el-table-column prop="doctorName"
                           label="医生姓名">
          </el-table-column>
          <el-table-column prop="doctorTitleName"
                           label="医生职级">
          </el-table-column>
          <el-table-column prop="departmentName"
                           label="所属科室">
          </el-table-column>
          <el-table-column prop="hospitalName"
                           label="所属医院">
          </el-table-column>
          <el-table-column prop="option"
                           label="操作">
            <template slot-scope="scope">
              <el-button type="danger"
                         @click="delRow(scope.row)">删 除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </div>
    <el-dialog title="新 增"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-form ref="formDialogRef"
               :model="formDialog"
               :rules="formDialogRules"
               label-width="80px">
        <el-form-item label="账号："
                      prop="phone">
          <el-select v-model="formDialog.phone"
                     filterable
                     clearable
                     placeholder="请选择医生账号"
                     :filter-method="changeVisiblePhobe"
                     @change="changePhone">
            <el-option v-for="item in phoneList"
                       :label="item"
                       :value="item"
                       :key="item"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="医生姓名"
                      prop="doctorName">
          <el-input v-model="formDialog.doctorName"
                    class="w-200"
                    :disabled="true"
                    placeholder="请选择医生账号查询医生姓名"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitDialog(readType)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'ECG-config',
    data () {
      return {
        type: 1,
        setType: 0,
        setCheckType: 0,
        formModel: {
          id: null,
          doctorName: '',
          phone: ''
        },
        formModelRules: {},
        tableData: [
          {
            checkPriceMap: {
              0: [
                { price: '', doctorTitleId: 3, doctorTitleName: "主任医师" },
                { price: '', doctorTitleId: 4, doctorTitleName: "副主任医师" },
                { price: '', doctorTitleId: 6, doctorTitleName: "主治医师" },
                { price: '', doctorTitleId: 7, doctorTitleName: "住院医师" },
                { price: '', doctorTitleId: 32, doctorTitleName: "公共卫生执业医师" }
              ],
              2: [
                { price: '', doctorTitleId: 15, doctorTitleName: "主任技师" },
                { price: '', doctorTitleId: 16, doctorTitleName: "副主任技师" },
                { price: '', doctorTitleId: 17, doctorTitleName: "主管技师" },
                { price: '', doctorTitleId: 18, doctorTitleName: "技师" }
              ],
              7: [
                { price: '', doctorTitleId: 47, doctorTitleName: "主任检验师" },
                { price: '', doctorTitleId: 48, doctorTitleName: "副主任检验师" },
                { price: '', doctorTitleId: 49, doctorTitleName: "主管检验师" },
                { price: '', doctorTitleId: 50, doctorTitleName: "检验师" },
                { price: '', doctorTitleId: 51, doctorTitleName: "检验士" }
              ]
            },
            recheckPriceMap: {
              0: [
                { price: '', doctorTitleId: 3, doctorTitleName: "主任医师", },
                { price: '', doctorTitleId: 4, doctorTitleName: "副主任医师" },
                { price: '', doctorTitleId: 6, doctorTitleName: "主治医师" }
              ],
              2: [
                { price: '', doctorTitleId: 15, doctorTitleName: "主任技师" },
                { price: '', doctorTitleId: 16, doctorTitleName: "副主任技师", },
                { price: '', doctorTitleId: 17, doctorTitleName: "主管技师", }
              ],
              7: [
                { price: '', doctorTitleId: 47, doctorTitleName: "主任检验师", },
                { price: '', doctorTitleId: 48, doctorTitleName: "副主任检验师" },
                { price: '', doctorTitleId: 49, doctorTitleName: "主管检验师" }
              ]
            }
          }
        ],
        tableList1: [],
        tableList2: [],
        formDialog: {
          phone: ''
        },
        dialogVisible: false,
        readType: '', // 1分析医生 2复核医生
        formDialogRules: {
          phone: [
            { required: true, message: '请输入请输入账号', trigger: ['blur', 'change'] }
          ]
        },
        phoneList: [],
      }
    },
    methods: {
      changeType (val) {
        val === 1 ? this.getDetail() : this.getDoctorDetail();
      },
      changeSetType (val) {
        this.setType = val;
      },
      changeSetCheckType (val) {
        this.setCheckType = val;
      },
      submitForm () {
        this.post(this.api.company.saveECG, this.tableData[0]).then(res => {
          if (res.data.code === '200') {
            this.$message.success('保存成功!');
          }
        })

      },
      handleAdd (val) {
        this.dialogVisible = true;
        this.readType = val;
        if (this.$refs.formDialogRef) {
          this.$refs.formDialogRef.resetFields();
        }
      },
      submitDialog (readType) {
        this.$refs['formDialogRef'].validate((valid) => {
          if (valid) {
            this.post(this.api.company.saveDoctor, {
              id: this.formDialog.id,
              readType: readType
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功!');
                this.dialogVisible = false;
                this.getDoctorDetail();
              }
            })
          }
        })
      },


      // 删除服务医生
      delRow (row) {
        this.$confirm('确认删除？')
          .then(_ => {
            this.post(this.api.company.delDoctor, { id: row.id }).then(res => {
              if (res.data.code === '200') {
                this.$message.success('删除成功!');
                this.getDoctorDetail();
              }
            })
          })
          .catch(_ => { });
      },
      // 通用价格配置详情
      getDetail () {
        this.post(this.api.company.detailECG).then(res => {
          if (res.data.code === '200') {
            let { checkPriceMap, recheckPriceMap } = res.data.object;
            let arr1 = Object.keys(checkPriceMap);
            let arr2 = Object.keys(recheckPriceMap);
            // console.log(arr.length == 0) ; // true 即为空对象
            this.tableData[0].checkPriceMap = arr1.length === 0 ? this.tableData[0].checkPriceMap : checkPriceMap;
            this.tableData[0].recheckPriceMap = arr2.length === 0 ? this.tableData[0].recheckPriceMap : recheckPriceMap;
          }
        })
      },
      // 服务医生配置详情
      getDoctorDetail () {
        this.post(this.api.company.detailDoctor).then(res => {
          if (res.data.code === '200') {
            let { checkDoctorList, recheckDoctorList } = res.data.object
            this.tableList1 = checkDoctorList;
            this.tableList2 = recheckDoctorList;
          }
        })
      },
      async changeVisiblePhobe (val) {
        if (val) {
          const { data: res } = await this.post(this.api.ECG.fuzzyByPhone, {
            phone: val
          })
          if (res.code === '200') {
            this.phoneList = res.object;
          }
        }
      },

      // 选择医生账号
      changePhone (val) {
        if (val) {
          this.post(this.api.ECG.queryByPhone, { phone: val })
            .then(({ data: res }) => {
              if (res.code === '200') {
                let resData = res.object;
                this.$set(this.formDialog, 'doctorName', resData.doctorName);
                this.formDialog.id = resData.doctorId;
              }
            })
        } else {
          this.formDialog.doctorName = '';
          this.phoneList = [];
        }

      },
    },
    created () {
      this.type === 1 ? this.getDetail() : this.getDoctorDetail();
    }
  }
</script>
<style lang="scss" scoped>
  .mb-20 {
    margin-bottom: 20px;
  }
</style>